<template>
	<view class="u-page">
		<view class="header"  :style="{backgroundImage:'url('+data.pic+')'}">
			<view class="nav-bar">
			<uni-nav-bar left-icon="back"  @clickLeft="goback()"  color="#ffffff" :border="border"  statusBar="true" backgroundColor="transparent">
				 <view slot="left" class="sitename">项目详情</view>
			</uni-nav-bar>
			</view>
			
		</view>
		<view class="content">
			<view class="project">
				<view class="projecttitle">
					<view class="title">{{data.title}}</view>
				
				</view>
				<view class="projectinfo" >{{data.contentInfo}}</view>
				<view class="tags">
					<block v-for="(item,index) in data.tag" :key="index">
							<uni-tag class="tag" :text="item" type="primary" circle="true"></uni-tag>
					</block>
				</view>
			</view>
			<view class="projectCol">
				<uni-grid :column="2" :showBorder="border"  @change="gridLink()">
					 <uni-grid-item :index="0">
						<view class="gridcol"><image src="../../../static/icon/hetong.png" mode=""></image></view>
						<view class="grid-text">合同管理</view>
					 </uni-grid-item>
					 <uni-grid-item :index="1">
						<view class="gridcol"><image src="../../../static/icon/users.png" mode=""></image></view>
						<view class="grid-text">投资人管理</view>
					 </uni-grid-item>
					
				</uni-grid>
			</view>
		
		
			<view class="projectContent">
				<view class="title">项目权益</view>
				<view class="wenxin">
					<view class="img"><image src="../../../static/icon/wenxin.png" mode=""></image></view>
					<view class="text">股东、投资人、家人可参与奖励任务，按订单数、订单金额、充值金额等进行推广奖励</view>
				</view>
				<rich-text :nodes="data.projectInfo"></rich-text> 
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				border:false,
				data:{}
			}
		},
		onLoad: function (option) { 
			this.pid= option.id
			this.propert(option.id)
		},
		methods: {
			goback(){
				
				uni.navigateBack({
					delta: 1
				})
			},
			//获取项目数据
			async propert(pid){
				const project = await this.GQL({
					"operationName": "allSlProjects",
					"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title projectInfo type tag status pic pid contentInfo } } }",
					"variables": {"filter": {"pid": {"equalTo": pid}}}
				})
				if(project.data.allSlProjects.nodes !=''){
					project.data.allSlProjects.nodes.forEach(function (item, index) {
						if(item.tag){
							item.tag = item.tag.split(',')
						}
					});
					this.data = project.data.allSlProjects.nodes[0]
				}
			},
			gridLink(id){
				if(id.detail.index == 1){
					uni.navigateTo({
						url:"/pages/user/project/investor?id="+this.pid
					})
				}else if(id.detail.index == 0){
					uni.navigateTo({
						url:"/pages/user/project/contract?id="+this.pid
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.u-page{
		background-color: #FBFCFE;
	}
	 .header{
	 	width: 100%;
	 	height: 260px;
	 	.nav-bar{
	 		.uni-navbar__header{
	 			padding-left:15px ;
	 		}
	 		.uni-navbar__header-btns-left{
	 			width: 150px;
	 		}
	 		.sitename{
	 			height: 50px;
	 			font-size: 18px;
	 			font-family: PingFangSC-Medium, PingFang SC;
	 			font-weight: 550;
	 			text-align: left;
	 			color: #FFFFFF;
	 		}
	 	}
	 }
	 .content{
			position: relative;
			top: -180px;
			
			margin: 15px;
		
	 }
	 .project{
		 .projecttitle{
			 color: #FFFFFF;
			 font-weight: 600;
			 line-height: 25px;
			 height: 30px;
			 // height: 28px;
			 .title{
			 	font-size: 18px;
			 	width: 80%;
				
				height: 28px;
				overflow: hidden;
			  }
			  .shareIcon{
				  top: -25px;
				  position: relative;
				  display: flex;
				  justify-content: flex-end;
				  image{
					  width: 20px;
					  height: 20px;
					  margin-left: 15px;
				  }
			  }
			
		 }
		
		.projectinfo{
			 line-height: 15px;
			margin: 10px 0px;
			font-size: 11px;
			color: #ffffff;
			font-weight: 400;
			width: 100%;
			height: 17px;
			overflow: hidden;
		}
		.tags{
			width: 100%;
			margin-top: 10px; 
			.tag{
				margin-right: 5px;
			}
		}
	 }
	 .projectCol{
		 margin-top: 30px;
		 border-radius:10px;
		 background-color: #FFFFFF;
		 height: 114px;
		 text-align: center;
		 display: block;
		 justify-content: center;
		 box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		 .gridcol{
			margin-top: 5px;
		 }
		 .grid-text{
	padding-bottom: 10px;
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #767B8D;
			line-height: 21px;
		 }
		 image{
			 width: 72px;
			 height: 72px;
		 }
	 }
		
	.projectCell{
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
	.projectContent{
		margin-top: 12px;
		// box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		.title{
			padding-top: 10px;
			margin-left: 10px;
			font-size: 18px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #161E3E;
			line-height: 16px;
		}
		.wenxin{
			margin: 10px;
			height: 50px;
			height: 48px;
			background: #FFF4F5;
			border-radius: 5px;
			border: 1px solid #FFB4B7;
			
		}
		.img{
			position: absolute;
			margin: 10px;
			image{
				width:25px;
				height: 25px;
			}
		}
		
		.text{
			margin: 8px 0px 0px 50px;
			font-size: 11px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #E73B42;
			line-height: 18px;
		}
	}
	
	.footer{
		background-color: #FFFFFF;
		height: 60px;
		width: 100%;
		.button{
			margin: 15px;
		}
	}
	
	 
</style>
